<template>
	
	<view class="container">
		<Search></Search>
		 <scroll-view class="scroll" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="handleScroll">
		<view class="main-top">
		<Swiper :banner="banner"></Swiper>
		</view>
		<view class="list">
			<view class="title">
				热门课程
			</view>
		<List :listData="listData" @myList="myList"></List>
		</view>
		</scroll-view> 
	</view>
	
</template>

<script>
	import Search from '@/components/search'
	import Swiper from '@/components/swiper'
	import List from '@/components/list'
	import {getBanner,getCourses} from '@/request/api'
	export default {
		components:{
			Search,
			Swiper,
			List
		},
		data() {
			return {
				//轮播图
				banner:[],
				listData:[],
				data:{
					page:1,
					page_size:6
				}
			}
		},
		async created() {
			//banner轮播图
		const res = await getBanner()
		 this.banner = res.data.data
		 //列表数据
		const res_2 = await getCourses(this.data)
		this.listData = res_2.data.data.data
		 // console.log(this.listData)
		},
		methods: {
			//下拉列表加载下一页
			 async handleScroll(){
				 if(this.listData.length % 6 !== 0){
					 uni.showToast({
					     title: '没有更多了',
					     duration: 2000
					 });
					 return
				 }
			 this.data.page++
			 const res = await getCourses(this.data)
			 this.listData = [...this.listData,...res.data.data.data]
		},
		myList(item){
			uni.navigateTo({
				url:'/pages/details/details?details='+item.id
			})
		}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		background-color: #f2f2f2;
		 .scroll{
			 margin-top: 100rpx;
			 height: calc(100vh - 100rpx);
		.main-top{
			padding: 0 20rpx;
			background-color: #fff;
			padding-bottom: 30rpx;
		}
		.list{
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		.title{
			font-size: 30rpx;
			font-weight: 700;
			padding: 20rpx 0;
		} }
	}
	} 
</style>
